<template>
  <el-menu v-bind::default-active="activeHeader" class="el-menu-demo" mode="horizontal" :ellipsis="false"
    text-color="#fff" active-text-color="#ffff" @select="handleSelect">
    <el-menu-item class="item" index="/index" @click="updateIsConsole1('false')">
      <router-link key="home" class="sidebar-logo-link" to="/">
        <img :src="require('@/assets/MAIL.png')" class="sidebar-logo">
      </router-link>
    </el-menu-item>
    <!-- <el-menu-item class="item" index="/publicComputilityService" @click="updateIsConsole('false')">信箱</el-menu-item> -->
    <div class="flex-grow" />
    <el-menu-item class="item" index="/home" @click="updateIsConsole('true')">邮箱系统</el-menu-item>
    
    <!-- 新添加的导航链接开始 -->
    <el-menu-item class="item" index="/ai-assistant">AI助手</el-menu-item>
    <!-- 新添加的导航链接结束 -->
    
    <el-sub-menu class="item" index="3" v-if="Object.keys(user).length > 0">
      <template #title>{{ user.userName }}</template>
      <el-menu-item index="/OrdinaryUser/user/setting" @click="updateIsConsole('true')"
        style="color:black;">个人中心</el-menu-item>
      <el-menu-item @click="logout" index="/login" style="color:black;">退出登录</el-menu-item>
      <el-menu-item index="/login" style="color:black;">切换账号</el-menu-item>
    </el-sub-menu>
    <el-menu-item v-else index="/login">登录/注册</el-menu-item>
  </el-menu>
</template>

<script>
export default {
  name: "VueHeader",
  props: {
    isConsole: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      activeHeader: this.$store.state.app.activeHeader,
      user: {},
      role: 0
    }
  },
  updated() {
    let userStr = sessionStorage.getItem("user") || '{}';
    this.user = JSON.parse(userStr);
  },
  watch: {
    '$route.path': function (newPath, oldPath) {
      console.log('new:', newPath)
      console.log('odl:', oldPath)
      this.$store.dispatch('app/setCurrentHeader', newPath)
      this.activeHeader = newPath
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
      if (key !== "3") {
        this.$router.push(key)
      }
    },
    updateIsConsole(newValue) {
      this.$store.dispatch('app/setIsConsole', newValue)
      console.log(this.$store.state.app.isConsole)
      this.$emit('change-console', newValue)
      this.$store.dispatch('user/getCurrentUser',{})
        .then(res => {
          console.log("后端返回")
          console.log(res)
        })
        .catch(error => {
          console.log(error)
          this.$message({
            type: "error",
            message: "还未登录"
          })
          this.$router.push("/login")
        })
        this.$router.push("/EmailSystemPages/SendEmail/Send")
    },
    logout() {
          this.$router.push("/login")
   
    },
    updateIsConsole1(newValue){
      this.$router.push("/index")
      this.$store.dispatch('app/setIsConsole', newValue)
      console.log(this.$store.state.app.isConsole)
      this.$emit('change-console', newValue)
    }
    // change(role)
    // {
    // if(role==0)
    // {
    //   this.role=1;
    // }else{
    //   this.role=0;
    // }
    // EventBus.$emit('pass-value', this.role)
    // }
  }
}
</script>
<style scoped>
.el-menu-demo .item {
  opacity: 80% !important;
}

.el-menu-demo .item:hover {
  background-color: dodgerblue !important;
  font-weight: 800;
}

.el-menu-demo .item:focus {
  background-color: dodgerblue !important;
  font-weight: 800;
}

.sidebar-logo-link {
  height: 100%;
  width: 100%;
}

.sidebar-logo {
  width: 148px;
  height: 40px;
  vertical-align: middle;
  margin-right: 12px;
}

.flex-grow {
  flex-grow: 1;
}
</style>